<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Accordion</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">List View Accordion</div>
    <div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-list">
      <ul>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Lorem Ipsum</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Nested List</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="list">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Integer semper</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Opposite Side</div>
    <div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-opposite accordion-list">
      <ul>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Lorem Ipsum</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Nested List</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="list">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Integer semper</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>